<html>
<head>
<title>TweetGraph</title>
<script type='text/javascript' src="scripts/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="scripts/core.js"></script>
<link href="styles/tweetgraph.css" type="text/css" rel="stylesheet" />
<link href="styles/bootstrap.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
</head>
<script type="text/javascript">
<!--
	function submitQuery(qType){
		document.qForm.action="/queryprocessor";
		document.qForm.mode.value=qType;
		document.qForm.submit();
	}
//-->
</script>
<body>
<form method="post" name="qForm" action="">
	<input type="hidden" name="mode" value=""/>


<div id="main">
	<div id="header">
		<a href="index.html"><img src="images/logo.png" class="logo"></a>
		<ul id="top_nav">
			<li><a href="index.html">Home</a></li>
			<li><a href="signup.html">Sign Up</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="content">
		<h2>Try it out</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum nibh vel est fringilla eu imperdiet.</p>
		<div id="select_left" class="create">
			<h3>1. Question Type</h3>
			<div class="question_type" id="btn_pie"><a href="#"><img src="images/btn_pie.png"></a><p>Yes/No</p></div>
			<div class="question_type" id="btn_bar"><a href="#"><img src="images/btn_bar.png"></a><p>Multi-Answer</p></div>
			<div class="question_type" id="btn_location"><img src="images/btn_map.png"><p>Location</p></div>
		</div>
		<form>
		<div id="right"  class="create">
			<div id="pie_form">
				<h3>2. Question Details</h3>
				<label>Enter your question:</label>
				<input type="text" name="qPieName" class="span8">
				<div class="alert-message">Participants must answer with "yes" or "no".</div>
				<label>Enter the hashtag for your question:</label>
				<input type="text" name="qPieHash" class="span8" placeholder="#">
				<input type="checkbox" name="qPieOther" value="yes"> Categorize unaccepted answers as "Other"
				<input type="button" value="Save Question" class="btn success" onclick="javascript:submitQuery('pie')">
			</div>
			<div id="bar_form">
				<h3>2. Question Details</h3>
				<label>Enter your question:</label>
				<input type="text" name="qBarName" class="span8">
				<div class="alert-message">Participants must use one of the following answers.</div>
				<div id="question_list">
					<span>Answer 1:</span>
					<input type="text" name="qBarOption1" class="span6">
					<span>Answer 2:</span>
					<input type="text" name="qBarOption2" class="span6">
					<span>Answer 3:</span>
					<input type="text" name="qBarOption3" class="span6">
				</div>
				<!-- <a class="btn" id="add_question">+ Add Another Answer</a> -->
				<label style="margin-top:15px;">Enter the hashtag for your question:</label>
				<input type="text" name="qBarHash" class="span8" placeholder="#">
				<input type="checkbox" name="qBarOther" value="yes"> Categorize unaccepted answers as "Other"
				<input type="button" value="Save Question" class="btn success" onclick="javascript:submitQuery('bar')">
				</div>
			<div id="location_form">
				<h3>2. Question Details</h3>
				<label>Enter your question:</label>
				<input type="text" name="qGeoName" class="span8">
				<div class="alert-message">Participants can answer with any location.</div>
				<label>Enter the hashtag for your question:</label>
				<input type="text" name="qGeoHash" class="span8" placeholder="#">
				<input type="button" value="Save Question" class="btn success" onclick="javascript:submitQuery('geo')">
			</div>
		</div>
		</form>
	</div>
	<div class="clear"></div>
	<div id="footer">
		<ul id="bottom_nav">
			<li>Copyright &copy; 2012</li>
		</ul>
	</div>

</div>
</form>
</body>

</html>